import Vue from "vue";
import { mapGetters } from "vuex";
import screenfull from "screenfull";

// dataV必须再重写组件之前引入
import dataV from "@jiaminghi/data-view";
Vue.use(dataV);

import FullScreenContainer from "@jiaminghi/data-view/src/components/fullScreenContainer/src/main.vue";
import ScrollBoard from "@jiaminghi/data-view/src/components/scrollBoard/src/main.vue";
import BorderBox11 from "@jiaminghi/data-view/src/components/borderBox11/src/main.vue";

// 全屏按钮图片
const fullScreenIcon =
  "";
const notFullScreenIcon =
  "";

// 重写方法
if (FullScreenContainer?.methods) {
  // 重写data-view的initConfig方法
  // 设定全屏的看板，以1920宽度为标准进行不同分辨率的自适应
  // 解决分辨率较小时，字体较大拥挤在一起问题
  FullScreenContainer.methods.initConfig = function () {
    const { dom } = this;

    if (!dom) {
      return;
    }

    const initScreen = {
      width: 1920,
      height: (1920 * screen.height) / screen.width,
    };

    const { width, height } = initScreen;

    this.allWidth = width;

    dom.style.width = `${width}px`;
    dom.style.height = `${height}px`;
  };

  // 重写data-view的setAppScale方法
  // 看板页面在某个容器里面显示，按照容器的大小进行缩放
  // 解决在html元素容器内不能正常铺平
  FullScreenContainer.methods.setAppScale = function () {
    const { allWidth, dom, datavRoot } = this;

    const currentWidth = datavRoot
      ? datavRoot.offsetWidth
      : document.body.clientWidth;

    if (dom) {
      dom.style.transform = `scale(${currentWidth / allWidth})`;
    }
  };
}
// 添加方法
FullScreenContainer.mixins.push({
  computed: {
    ...mapGetters(["sidebar"]),
  },
  // 添加mounted方法，初始化添加全屏按钮
  mounted() {
    this.enableFullScreen = this.$attrs.hasOwnProperty("enableFullScreen"); //是否能全屏
    this.isScreenfull = false; // 看板的全屏状态
    this.isScreenfullOfSystem = screenfull.isFullscreen; // 系统的全屏状态

    if (this.$parent.$el) {
      this.updateDatavRoot(this.$parent.$el);
    }

    this.$el.style.position = "relative";
    this.$el.style.zIndex = 999;

    if (this.enableFullScreen) {
      // 添加全屏按钮
      const iconPosition = this.$attrs["icon-position"];
      const img = document.createElement("img");
      img.id = "fullScreenIcon";
      img.src = this.isScreenfull ? notFullScreenIcon : fullScreenIcon;
      img.style.position = "absolute";
      img.style.zIndex = 10;
      img.style.width = iconPosition?.width || "16px";
      img.style.height = iconPosition?.height || "16px";
      img.style.right = iconPosition?.right || "40px";
      img.style.top = iconPosition?.top || "16px";
      img.style.cursor = "pointer";
      img.addEventListener("click", this.spanClick);

      this.$el.appendChild(img);
    }
  },
  // 容器激活时，重新计算缩放比例
  activated() {
    if (!this.dom) {
      return;
    }

    this.isScreenfullOfSystem = screenfull.isFullscreen; // 系统的全屏状态

    if (!this.isScreenfullOfSystem) {
      if (this.$parent.$el) {
        this.updateDatavRoot(this.$parent.$el);
      }
      this.afterAutoResizeMixinInit();
      this.dom.style.position = "relative";
      this.dom.style.zIndex = 999;

      // 修改全屏按钮图标
      const fullScreenIconEle = document.querySelector("#fullScreenIcon");
      fullScreenIconEle.src = fullScreenIcon;
    }

    this.setAppScale();
  },
  // 容器停用
  deactivated() {},
  methods: {
    // 给data-view的updateDatavRoot方法
    // 给全屏容器添加容器（父级元素）
    // 用于给setAppScale计算缩放比例
    updateDatavRoot(rootElement) {
      this.datavRoot = rootElement;
    },
    // 全屏按钮点击事件
    spanClick() {
      if (!this.dom) {
        return;
      }

      this.isScreenfull = !this.isScreenfull;
      if (this.isScreenfull) {
        // 全屏

        // 记录看板全屏前，系统是否全屏
        this.isScreenfullOfSystem = screenfull.isFullscreen;

        // 当前系统不是全屏状态时，看板全屏需要调用screenfull.request达到全屏效果
        if (!this.isScreenfullOfSystem) {
          screenfull.request();
        }

        this.updateDatavRoot(null);
        this.afterAutoResizeMixinInit();
        this.dom.style.position = "fixed";
        this.dom.style.zIndex = 1200;

        // 修改全屏按钮图标
        const fullScreenIconEle = document.querySelector("#fullScreenIcon");
        fullScreenIconEle.src = notFullScreenIcon;
      } else {
        // 退出全屏

        // 当前是全屏状态，且看板全屏前的系统是非全屏，则调用screenfull.exit恢复系统原来的状态
        if (screenfull.isFullscreen && !this.isScreenfullOfSystem) {
          screenfull.exit();
        }

        if (this.$parent.$el) {
          this.updateDatavRoot(this.$parent.$el);
        }
        this.afterAutoResizeMixinInit();
        this.dom.style.position = "relative";
        this.dom.style.zIndex = 999;

        // 修改全屏按钮图标
        const fullScreenIconEle = document.querySelector("#fullScreenIcon");
        fullScreenIconEle.src = fullScreenIcon;
      }
    },
  },
  watch: {
    "sidebar.opened": {
      handler(newVal) {
        setTimeout(() => {
          this.afterAutoResizeMixinInit();
        }, 800);
      },
    },
  },
});

// 轮播表
ScrollBoard.mixins.push({
  // 添加activated生命周期，组件激活时，重新计算高度
  async activated() {
    await this.initWH(false);
    this.calcData();
  },
});

// 边框11
BorderBox11.mixins.push({
  // 添加activated生命周期，组件激活时，重新计算高度
  async activated() {
    await this.initWH(false);
  },
});

Vue.component(FullScreenContainer.name, FullScreenContainer);
Vue.component(ScrollBoard.name, ScrollBoard);
Vue.component(BorderBox11.name, BorderBox11);

// import Vue from "vue";

// // dataV必须再重写组件之前引入
// import dataV from "@jiaminghi/data-view";
// Vue.use(dataV);

// // 重写data-view的initConfig方法
// // 设定全屏的看板，以1920宽度为标准进行不同分辨率的自适应
// // 解决分辨率较小时，字体较大拥挤在一起问题
// import FullScreenContainer from "@jiaminghi/data-view/src/components/fullScreenContainer/src/main.vue";
// if (FullScreenContainer?.methods) {
//   FullScreenContainer.methods.initConfig = function () {
//     const { dom } = this;

//     const initScreen = {
//       width: 1920,
//       height: (1920 * screen.height) / screen.width,
//     };

//     const { width, height } = initScreen;

//     this.allWidth = width;

//     dom.style.width = `${width}px`;
//     dom.style.height = `${height}px`;
//   };

//   FullScreenContainer.methods.setAppScale = function () {
//     const { allWidth, dom } = this;

//     const currentWidth = this.datavRoot
//       ? this.datavRoot.offsetWidth
//       : document.body.clientWidth;

//     dom.style.transform = `scale(${currentWidth / allWidth})`;
//   };

//   FullScreenContainer.methods.updateDatavRoot = function (rootElement) {
//     this.datavRoot = rootElement;
//   };
// }
// Vue.component(FullScreenContainer.name, FullScreenContainer);
